<template>
  <div>
    <div class="title">
      <p>{{$attrs.title}}</p>
    </div>
    <a-carousel autoplay>
        <div v-for="(item,index) in showData.slice(0,4)" :key="item.targetId">
          <span>
            <img :src="showData[2*index].imageUrl" alt="">
          </span>
          <span>
             <img :src="showData[(index*2)+1].imageUrl" alt="">
          </span>
        </div>
  </a-carousel>
  </div>
</template>

<script>
// eslint-disable-next-line import/no-extraneous-dependencies
import store from 'storejs';

export default {
  name: 'PlaymusicApplemusic',
  data() {
    return {
      showData: [],
    };
  },
  created() {
    const params = {};
    if (store.get('user')) {
      params.cookie = store.get('user').cookie;
    }
    this.$getBanner(params).then((res) => {
      // eslint-disable-next-line no-console
      this.showData = Object.freeze(res.data.banners);
    }).catch((err) => {
      // eslint-disable-next-line no-console
      console.log(err);
    });
  },
};
</script>

<style lang="scss" scoped>
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
.title p{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text);
}
span{
  display: inline-block;
  width: 591px;
  height:235px;
  float: left;
  img{
    width: 100%;
    height: 100%;
  }
   &:nth-of-type(2){
      margin-left: 21px;
  }
}
/deep/ .slick-dots{
  display: flex;
  width: 100px;
  left: 45.5%;
  bottom: -23px;
  justify-content: space-between;
  li{
    background: #e3e3e3;
    width: 8px;
    height:8px;
    border-radius: 50%;
    &.slick-active{
      background: #b1b1b1;
      button{
        opacity: 0;
      }
    }
  }
}
/deep/ .ant-carousel .slick-dots li button {
    display: block;
    width: 16px;
    height: 3px;
    padding: 0;
    color: transparent;
    font-size: 0;
    opacity:0;
    border: 0;
    border-radius: 1px;
    outline: none;
    cursor: pointer;
    // opacity: 0.3;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
/deep/ .ant-carousel .slick-dots li.slick-active button{
  opacity:0;
}
</style>
